<template>
	<div class="tabsBox">
		<div>
			<span class="tltle" :class="(params.channelIdStr?params.channelIdStr:null)==item.channelId?'isActive':''"
				v-for="item in contentCntStatistics" @click="titleSel(item)">{{item.channelName}}</span>
		</div>
		<div class="tabsBtm">
			<span class="tabsBtmLeft">本站找到 “{{word}}”相关结果共 {{contentPage.total}} 条</span>
			<div class="tabsBtmRight">
				<div class="tabsBtmRightL">
					<span class="tabsBtmRightLX" @click="params.orderBy=null,search()" n
						:class="params.orderBy==null&&'isSel'">相关度</span>
					<span class="tabsBtmRightLT" @click="params.orderBy=3,search()"
						:class="params.orderBy==3&&'isSel'">发布时间</span>
				</div>
				<div class="tabsBtmRightR">
					<div class="flex fontHover" @click="isMouse=1">
						<span>{{fonts}}</span>
						<span class="iconfont icon-a-arrowdown fontDown" :class="isMouse==1&&'trsf'"></span>
					</div>
					<div class="seleteFont" v-if="isMouse==1">
						<p @click="isSwitch(item)" class="fontp" :class="params.timeStage==item.id&&'isFont'"
							v-for="item in timelist">
							{{item.name}}
						</p>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['contentCntStatistics','contentPage','word'],
		data() {
			return {
				font: null,
				fonts: '时间不限',
				isMouse: -1,
				wordList: [],
				url: '',
				params: {
					channelPaths: '',
					timeStage: null,
					orderBy: null,
					channelIdStr:''
				},
				timelist: [{
						id: null,
						name: '时间不限',
					},
					{
						id: 1,
						name: '一天内'
					},
					{
						id: 2,
						name: '一周内'
					},
					{
						id: 3,
						name: '一月内'
					},
					{
						id: 4,
						name: '一年内'
					}
				],
			}
		},
		created() {},
		mounted() {

		},
		methods: {
			titleSel(val) {
				this.params.channelIdStr = val.channelId
				this.search()
			},
			isSwitch(val) {
				this.isMouse = -1
				this.params.timeStage = val.id
				this.fonts = val.name
				this.search()
			},
			search() {
				this.$emit('search', this.params)
			}
		}
	}
</script>

<style scoped>
	.tabsBox {
	  margin-top: 40px;
	  padding-top: 18px;
	  border-top: 1px solid #EFEFEF;
	}
	.tabsBox .tltle {
	  cursor: pointer;
	  padding-top: 14px;
	  height: 18px;
	  font-size: 18px;
	  font-weight: 400;
	  color: #666666;
	  line-height: 18px;
	  margin-right: 48px;
	}
	.tabsBox .isActive {
	  border-top: 3px solid #FF3333;
	  font-weight: 500;
	  color: #333333;
	}
	.tabsBox .fontDown {
	  margin-left: 4px;
	  font-size: 18px;
	}
	.tabsBox .trsf {
	  transform: rotate(180deg);
	}
	.tabsBox .tabsBtm {
	  margin-top: 24px;
	  display: flex;
	  justify-content: space-between;
	}
	.tabsBox .tabsBtm .tabsBtmLeft {
	  height: 14px;
	  font-size: 14px;
	  font-weight: 400;
	  color: #999999;
	  line-height: 14px;
	}
	.tabsBox .tabsBtm .tabsBtmRight {
	  display: flex;
	  align-items: center;
	}
	.tabsBox .tabsBtm .tabsBtmRight .tabsBtmRightL {
	  height: 14px;
	  font-size: 14px;
	  font-weight: 400;
	  color: #666666;
	  line-height: 14px;
	}
	.tabsBox .tabsBtm .tabsBtmRight .tabsBtmRightL .tabsBtmRightLX {
	  padding-right: 9px;
	  cursor: pointer;
	}
	.tabsBox .tabsBtm .tabsBtmRight .tabsBtmRightL .tabsBtmRightLT {
	  cursor: pointer;
	  padding-left: 7px;
	  border-left: 1px solid #EFEFEF;
	}
	.tabsBox .tabsBtm .tabsBtmRight .tabsBtmRightL .isSel {
	  font-weight: 500;
	  color: #333333;
	}
	.tabsBox .tabsBtm .tabsBtmRightR {
	  margin-left: 40px;
	  width: 88px;
	  position: relative;
	}
	.tabsBox .tabsBtm .tabsBtmRightR .fontHover {
	  line-height: 1;
	  height: 14px;
	  font-size: 14px;
	  font-weight: 400;
	  color: #333333;
	  line-height: 14px;
	}
	.tabsBox .tabsBtm .tabsBtmRightR .seleteFont {
	  padding: 8px 0;
	  position: absolute;
	  top: 20px;
	  width: 88px;
	  background: #FFFFFF;
	  box-shadow: 0px 6px 45px 0px rgba(0,0,0,0.1);
	  border-radius: 4px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  z-index: 102;
	}
	.tabsBox .tabsBtm .tabsBtmRightR .seleteFont .fontp {
	  width: 100%;
	  height: 32px;
	  line-height: 32px;
	  text-align: center;
	  font-size: 14px;
	  font-weight: 400;
	  color: #333;
	}
	.tabsBox .tabsBtm .tabsBtmRightR .seleteFont .isFont {
	  background: #F8F8F8 !important;
	  color: #FF3333 !important;
	}
	.tabsBox .tabsBtm .isHover:hover {
	  color: #FFFFFF;
	  cursor: pointer;
	}

</style>